<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script src="../js/vue.js"></script>
<div id="app">
  <cpp></cpp>
  <cpp><a href="">插了个啊标签</a></cpp>
  <cpp><i>插了个i标签</i></cpp>
  <cpp><span>插了个span标签</span></cpp>
  <cpp></cpp>
</div>

<template id="cpp">
  <div>
    <h2>插槽的基本使用</h2>
    <p>喜欢插槽</p>
    <slot>  <!--这里的button标签是插槽的默认值，如果不插数据，就显示按钮-->
      <button>按钮</button>
    </slot>
  </div>

</template>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"第一次，系统的学VUE"
        },
      components:{
          cpp:{
            template:`#cpp`
          }
      }
    })
</script>

</body>
</html>